<template>
  <el-form
    ref="basicInfoRef"
    :model="basicInfo"
    :rules="formRules"
    :style="{ width: setFormWidth }"
    class="lineHeight32 base-setting-form"
    label-width="80px"
    label-position="right">
    <el-row type="flex" class="response-el-row">
      <el-col :span="24">
        <el-form-item label="快捷图标" prop="icon">
          <div class="icon-container">
            <div :style="{ background: basicInfo?(basicInfo.iconColor || defaultColor): defaultColor}" class="icon-box">
              <img :src="getIcon(basicInfo.icon)" alt="图标">
            </div>
            <IconPopover v-if="!basicInfo.isContract" :icon-info="basicInfo" @handleIconChange="handleIconChange" />
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="审批名称" prop="name">
          <el-input
            v-model="basicInfo.name"
            :maxlength="100"
            :disabled="isFixed"
            class="width240"
            placeholder="请输入"
            size="small"
            type="textarea"
            @input="inputChange"
            @blur="handleFormNameChange"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="所属分组" prop="group" clearable size="small">
          <el-select v-model="basicInfo.group" :disabled="basicInfo.isContract" popper-class="global-select-down" @change="handleFormNameChange">
            <el-option
              v-for="item in groupList"
              :key="item.id"
              :label="item.name"
              :value="item.id" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="审批说明" prop="explanation" class="width100">
          <el-input
            v-model="basicInfo.explanation"
            maxlength="2000"
            clearable
            type="textarea"
            placeholder="审批说明将展示在创建审批页面"/>
          <StyleConfig ref="styConfig" :new-config="basicInfo.styConfig"/>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import StyleConfig from '../../model/styleConfig';
import IconPopover from './iconPopover';
import iconConfig from '@/mixins/iconConfig';
import { getProcessManagement } from '@/api/legal';
import { mapState } from 'vuex';
export default {
  components: {
    StyleConfig,
    IconPopover
  },
  mixins: [iconConfig],
  props: {
    isFixed: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      basicInfo: {
        icon: 'configIcon1',
        iconColor: '',
        name: '',
        explanation: '',
        styConfig: '',
        group: ''
      }
    };
  },
  computed: {
    ...mapState({
      'groupList': state => state.process.groupList
    }),
    formRules() {
      return {
        icon: [{ required: true }],
        name: [{ required: true, trigger: 'blur', message: '请输入' }],
        group: [{ required: true, trigger: 'change', message: '请选择' }]
      };
    },
    setFormWidth() {
      return !this.isEdit ? '572px' : this.isFixed ? '476px' : '662px';
    }
  },
  created() {
    if (!this.groupList.length) {
      this.queryProcessGroup();
    }
  },
  methods: {
    inputChange() {
      this.$emit('statusCheck');
    },
    queryProcessGroup() {
      getProcessManagement().then(res => {
        this.$store.commit('SET_GROUP_LIST', res.data);
      }).catch(_ => false);
    },
    handleIconChange(data) {
      const { icon, iconColor } = data;
      if (this.basicInfo) {
        this.basicInfo.icon = icon;
        this.basicInfo.iconColor = iconColor;
      }
    },
    handleConfigChange(config) {
      this.basicInfo.styConfig = config;
    },
    handleFormNameChange() {
      if (this.basicInfo) this.$emit('formNameChange', this.basicInfo.name);
    },
    // 校验
    validateForm() {
      return new Promise((resolve, reject) => {
        this.$refs['basicInfoRef'].validate().then(() => {
          resolve(true);
        }).catch(() => {
          reject('请完善基本设置信息');
        });
      });
    },
    // 获取数据
    getBasicInfo() {
      this.basicInfo.styConfig = this.$refs['styConfig'].getstyConfig();
      return _.cloneDeep(this.basicInfo);
    },
    // 设置数据
    setData(data) {
      this.basicInfo = _.cloneDeep(data);
      this.handleFormNameChange();
    }
  }
};
</script>

<style scoped lang="scss">
.base-setting-form {
  margin: 24px auto 0;
  .response-el-row {
    & ::v-deep {
      .el-input__inner {
        height: 32px;
        line-height: 32px;
        width: 240px;
      }
      .el-form-item__content {
        width: 240px;
      }
      .el-input__icon {
        line-height: 32px;
      }
      .el-form-item {
        margin-bottom: 24px;
      }
      .el-select {
        .el-input {
          .el-select__caret {
            color: #333333;
          }
        }
      }
      .width100 {
        .el-form-item__content {
          width: 100%;
        }
      }
    }
    .icon-container {
      display: flex;
      align-items: center;
      line-height: 100%;
      .icon-box {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        margin-right: 12px;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        > img {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}
</style>
